import {Space, Table, Tag, Button, message, Popconfirm, Form, Modal, Card, Upload, Select, Col, Row, Alert} from 'antd';
import React ,{Component }from 'react';
import {DownloadOutlined, InboxOutlined, WarningOutlined} from "@ant-design/icons";

import {
  findById,
  GetModelFeature,
  ModelDelete,
  ModelDownload,
  ModelFeature,
  ModelList,
  ResultFeatureData
} from "@/services/A10/ModelController"
import styles from "@/pages/Model/model.less";
import * as echarts from "echarts";
import {TestList, TestUpload} from "@/services/A10/TestController";
import { getLoginUserUsingGET } from "@/services/a10_back/userController";

const Dragger = Upload.Dragger;
class ExamplePage extends Component{

  state = {
    data: [],
    columns: [],
    showInput:false,
    size: '',
    xdata:[],
    ydata:[],
    ModelAndTestName: { testPath: '', modelPath: '',modelId:'',testId:'',modelName:'' },
    Testcolumns:[],
    TestData:[],
    Juage:[],
    initSearchParams: {name: "(展示数据)"},
    transformedData:{},
    sortedKeys:[],
    currentPage: 1, // 当前页数
    pageSize: 5, // 每页显示条数
    total: 0, // 总条数
    modelFileVo:{ id:'',name:"(展示数据)",number:'20' },
    originalData:[],
    maxIndex:[1,1,1]
  }

  async componentDidMount() {

    let user = await getLoginUserUsingGET();
    const userid=user.data.id;
    const data = await ModelList(userid);

    const total = data.length;

    const columns = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        colSpan:0,
        render:()=>{return {props:{colSpan:0}};}
      },
      {
        title: 'url',
        dataIndex: 'url',
        key: 'url',
        colSpan:0,
        render:()=>{return {props:{colSpan:0}};}
      },
      {
        title: '模型文件列表',
        dataIndex: 'fileName',
        key: 'fileName',
      },
      {
        title: '文件大小',
        dataIndex: 'fileSize',
        key: 'fileSize',
      },
      {
        title: '下载',
        dataIndex: 'Download',
        key: 'Download',
        render:(text, record)=> {
          return (<Button type="primary" icon={<DownloadOutlined/>} onClick={()=>this.handModelDownload(record)} size={this.setState.size} className={styles.ButtonInfo}>下载模型</Button>);
        },
      },
      {
        title: '分析特征重要性',
        dataIndex: 'Show',
        key: 'Show',
        render:(text, record)=> {
          return (
            <div>
              <Button type="primary"  size={this.setState.size} onClick={()=>this.SelectTestFile(record)}
                      className={styles.ButtonInfo} loading={this.state.Juage.includes(record.fileName)} style={{width:"130px"}}>
                分析模型特征
              </Button>
            </div>

        );
        },
      },
      {
        title: '查看特征重要性',
        key: 'examine',
        dataIndex: 'examine',
        render:(text, record)=> {
          return (
            <Button type="primary" onClick={()=>this.BarView(record)} style={{marginLeft:'15px',width:'70px'}} className={styles.ButtonInfo}>
              查看
            </Button>
            );
        },
      },
      {
        title: '删除',
        key: 'Delete',
        dataIndex: 'Delete',
        render:(text, record)=> {
          return (
            <Popconfirm
              title="确定要删除此文件吗?"
              onConfirm={() => this.headDeleteModel(record)}
              icon={
                <WarningOutlined
                  style={{
                    color: 'red',
                  }}
                />
              }
            >
            <Button type="primary" danger className={styles.ButtonInfo}>删除模型</Button>
            </Popconfirm>);
        },
      }
    ];

    const Testcolumns = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        colSpan:0,
        render:()=>{return {props:{colSpan:0}};}
      },
      {
        title: 'url',
        dataIndex: 'url',
        key: 'url',
        colSpan:0,
        render:()=>{return {props:{colSpan:0}};}
      },
      {
        title: '测试文件列表',
        dataIndex: 'fileName',
        key: 'fileName',
      },
      {
        title: '文件大小',
        dataIndex: 'fileSize',
        key: 'fileSize',
      },
      {
        title: '分析',
        dataIndex: 'Download',
        key: 'Download',
        render:(text, record)=> {
          return (<Button type="primary" onClick={() => this.analyse(record)} className={styles.ButtonInfo}>分析</Button>);
        },
      },
    ];

    let data1 = {
      feature0: [0.0034392831870432433, 0.008990894646405475, 0.006624693132279446, 0.0047483959199889954, 0.004529932792309679, 0.10227110497345307],
      feature1: [0.00359083766891231, 0.0004275954561739681, 0.00016483187445096338, 0.0004218163565643339, 0.0, 0.0],
      feature2: [0.10899349036814551, 0.6854140100286337, 0.1261003575056618, 0.019893426782617084, 0.03382084965856556, 0.012453061106759328],
      feature3: [0.010017440285872823, 0.02684734036303809, 0.008214065369702539, 0.017368990922143307, 0.004011385523571998, 0.010906517892218923],
      feature4: [0.010319546638656737, 0.005435855840728608, 0.019107664132374802, 0.0017109785400955839, 0.0034502912826208094, 0.015840563694474386],
      feature5: [0.8628197100217978, 0.08538516621274106, 0.05344441355108587, 0.6825644124876538, 0.21972113601856916, 0.19511558081262706],
      feature6: [0.04068390835800301, 0.04065845344708851, 0.0335145224079389, 0.004724235006432125, 0.036915878724449, 0.006205367743317535],
      feature7: [0.03037317912662536, 0.027782935765840188, 0.016951618274936426, 0.004010557336961989, 0.0034317207148905847, 0.005559216685434508],
      feature8: [0.003185424640757269, 0.005351237456264058, 0.0038091398797798, 0.004912989469463433, 0.00496489186874924, 0.01872228345551254],
      feature9: [0.0048192773964236225, 0.0054380076981506795, 0.02994492988293918, 0.0033465825343775442, 0.003656537190104643, 0.011896381042150345],
      feature10:[1.1711943644794298, 0.5730499917301024, 0.20567506906295838, 0.3251234373036793, 2.5459331936879015, 0.5177159050626421],
      feature11: [0.0034392831870432433, 0.008990894646405475, 0.006624693132279446, 0.0047483959199889954, 0.004529932792309679, 0.10227110497345307],
      feature12: [0.00359083766891231, 0.0004275954561739681, 0.00016483187445096338, 0.0004218163565643339, 0.0, 0.0],
      feature13: [0.10899349036814551, 0.6854140100286337, 0.1261003575056618, 0.019893426782617084, 0.03382084965856556, 0.012453061106759328],
      feature14: [0.010017440285872823, 0.02684734036303809, 0.008214065369702539, 0.017368990922143307, 0.004011385523571998, 0.010906517892218923],
      feature15: [0.010319546638656737, 0.005435855840728608, 0.019107664132374802, 0.0017109785400955839, 0.0034502912826208094, 0.015840563694474386],
      feature16: [0.8628197100217978, 0.08538516621274106, 0.05344441355108587, 0.6825644124876538, 0.21972113601856916, 0.19511558081262706],
      feature17: [0.04068390835800301, 0.04065845344708851, 0.0335145224079389, 0.004724235006432125, 0.036915878724449, 0.006205367743317535],
      feature18: [0.03037317912662536, 0.027782935765840188, 0.016951618274936426, 0.004010557336961989, 0.0034317207148905847, 0.005559216685434508],
      feature19: [0.003185424640757269, 0.005351237456264058, 0.0038091398797798, 0.004912989469463433, 0.00496489186874924, 0.01872228345551254],
      feature20: [0.0048192773964236225, 0.0054380076981506795, 0.02994492988293918, 0.0033465825343775442, 0.003656537190104643, 0.011896381042150345],
    };
    this.setState({originalData:data1})
    // 将 data1 对象的值转为数组
    const dataArray = Object.entries(data1);

// 对数组中的每个子数组进行排序
    dataArray.sort(([key1, value1], [key2, value2]) => {
      const sum1 = value1.reduce((a, b) => a + b, 0);
      const sum2 = value2.reduce((a, b) => a + b, 0);
      return sum1 - sum2; // 按照总和降序排列
    });

// 将排序后的数组重新映射回对象
    const sortedData = Object.fromEntries(dataArray);
    // 提取排序后的键
    const sortedKeys = dataArray.map(([key, value]) => key);
    data1 = sortedData;

    let xdata=['feature0', 'feature1', 'feature2', 'feature3', 'feature4', 'feature5', 'feature6', 'feature7', 'feature8', 'feature9', 'feature10', 'feature11', 'feature12', 'feature13', 'feature14', 'feature15', 'feature16', 'feature17', 'feature18', 'feature19']
    const ydata =[20000,31292, 25144, 16225, 18218, 14640, 3325, 3858, 3870, 2992, 2906, 2840, 2772, 2665, 2364, 2135, 6068, 1993, 1988, 1960, 1933];
    const transformedData = {};

    Object.keys(data1).forEach((key) => {
      const feature = data1[key];
      feature.forEach((value, index) => {
        if (!transformedData[index]) {
          transformedData[index] = [];
        }
        transformedData[index].push(value);
      });
    });

    this.setState({sortedKeys})
    this.setState({ydata})
    this.setState({xdata})
    this.setState({transformedData})
    this.setState({Testcolumns})
    this.setState({ columns });
    this.setState({ data, total });
    this.drawBarChart();
    this.drawStackedBarChart();
  }

  handModelDownload(record){
    const key = 'Download';
    message.open({
      key,
      type: 'loading',
      content: '文件下载中...',
      duration: 0
    });
    ModelDownload(record).then(resp => {
      message.open({
        key,
        type: 'success',
        content: `${record.fileName} 下载完成`,
        duration: 2,
      });

    })
  }
  loadData = async () => {
    let user = await getLoginUserUsingGET();
    const userid=user.data.id;
    const data = await ModelList(userid)
    const total = data.length;
    this.setState({ data, total });
    this.setState({ data });
  }

  loadTestData = async () => {
    let user = await getLoginUserUsingGET();
    let userid = user.data.id;
    const TestData = await TestList(userid);
    this.setState({ TestData });
  }
  BarView(record){
    const id = record.id;
    const name=record.fileName;
    // eslint-disable-next-line react/no-direct-mutation-state
    this.state.modelFileVo.id=id;
    // eslint-disable-next-line react/no-direct-mutation-state
    this.state.modelFileVo.name=name;
    ResultFeatureData(record).then(resp => {
      if(resp.data.success===true){
        const modelname=record.fileName;
        const initSearchParams = {
          name: modelname,
        };
        this.setState({initSearchParams})
        const bardata=resp.data.data;
        let xdata = [];
        let ydata = [];

        for (let i = 0; i < bardata.length; i++) {
          let keys = Object.keys(bardata[i]);
          let values = Object.values(bardata[i]);
          xdata.push(keys[0]);
          ydata.push(values[0]);
        }
        this.setState({xdata});
        this.setState({ydata});
        console.log(xdata);
        this.drawBarChart();

        //接受shapdata,转成json
        const receivedJsonStr = resp.data.shapdata; // 替换为接收到的 JSON 字符串
        // 解析 JSON 字符串为 JavaScript 对象
        const receivedData = JSON.parse(receivedJsonStr);
        // 创建空对象用于存储键和值
        let data = {};
        // 遍历 receivedData 中的每个键值对，存储到 data 对象中
        for (const key in receivedData) {
          if (receivedData.hasOwnProperty(key)) {
            const value = receivedData[key].myArrayList;
            data[key] = value;
          }
        }
        this.setState({originalData:data})
        let maxIndex1 = data[xdata.slice(0, 3)[0]].indexOf(Math.max(...data[xdata.slice(0, 3)[0]]));
        let maxIndex2 = data[xdata.slice(0, 3)[1]].indexOf(Math.max(...data[xdata.slice(0, 3)[1]]));
        let maxIndex3 = data[xdata.slice(0, 3)[2]].indexOf(Math.max(...data[xdata.slice(0, 3)[2]]));
        const maxIndex = [maxIndex1,maxIndex2,maxIndex3];
        this.setState({maxIndex})
        console.log(maxIndex2)
        // 将 data1 对象的值转为数组
        const dataArray = Object.entries(data);

        // 对数组中的每个子数组进行排序
        dataArray.sort(([key1, value1], [key2, value2]) => {
          const sum1 = value1.reduce((a, b) => a + b, 0);
          const sum2 = value2.reduce((a, b) => a + b, 0);
          return sum1 - sum2; // 按照总和降序排列
        });

        // 将排序后的数组重新映射回对象
        const sortedData = Object.fromEntries(dataArray);
        // 提取排序后的键
        const sortedKeys = dataArray.map(([key, value]) => key);

        data=sortedData;

        //转换成图表格式
        let transformedData = {};
        Object.keys(data).forEach((key) => {
          const feature = data[key];
          feature.forEach((value, index) => {
            if (!transformedData[index]) {
              transformedData[index] = [];
            }
            transformedData[index].push(value);
          });
        });
        this.setState({sortedKeys})
        this.setState({transformedData})
        this.drawStackedBarChart();
      }
      if(resp.data.success===false){
        message.warn("还没有分析模型特征重要性,请先分析");
      }
    });
  }

  analyse(record){
    const showInput = false;
    const updatedModelAndTestName = { ...this.state.ModelAndTestName, testPath: record.url,testId: record.id };
    this.setState({ showInput, ModelAndTestName: updatedModelAndTestName });
    const modelName=updatedModelAndTestName.modelName;
    const Juage = [...this.state.Juage, modelName];
    this.setState({Juage})
    const columns = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        colSpan:0,
        render:()=>{return {props:{colSpan:0}};}
      },
      {
        title: 'url',
        dataIndex: 'url',
        key: 'url',
        colSpan:0,
        render:()=>{return {props:{colSpan:0}};}
      },
      {
        title: '模型文件列表',
        dataIndex: 'fileName',
        key: 'fileName',
      },
      {
        title: '文件大小',
        dataIndex: 'fileSize',
        key: 'fileSize',
      },
      {
        title: '下载',
        dataIndex: 'Download',
        key: 'Download',
        render:(text, record)=> {
          return (<Button type="primary" icon={<DownloadOutlined/>} onClick={()=>this.handModelDownload(record)} size={this.setState.size} className={styles.ButtonInfo}>下载模型</Button>);
        },
      },
      {
        title: '分析特征重要性',
        dataIndex: 'Show',
        key: 'Show',
        render:(text, record)=> {
          return (
            <div>
              <Button type="primary"  size={this.setState.size} onClick={()=>this.SelectTestFile(record)}
                      className={styles.ButtonInfo} loading={this.state.Juage.includes(record.fileName)} style={{width:"130px"}}>
                分析模型特征
              </Button>
            </div>

          );
        },
      },
      {
        title: '查看特征重要性',
        key: 'examine',
        dataIndex: 'examine',
        render:(text, record)=> {
          return (
            <Button type="primary" onClick={()=>this.BarView(record)} style={{marginLeft:'15px',width:'70px'}} className={styles.ButtonInfo}>
              查看
            </Button>
          );
        },
      },
      {
        title: '删除',
        key: 'Delete',
        dataIndex: 'Delete',
        render:(text, record)=> {
          return (
            <Popconfirm
              title="确定要删除此文件吗?"
              onConfirm={() => this.headDeleteModel(record)}
              icon={
                <WarningOutlined
                  style={{
                    color: 'red',
                  }}
                />
              }
            >
              <Button type="primary" danger className={styles.ButtonInfo}>删除模型</Button>
            </Popconfirm>);
        },
      }
    ];
    this.setState({ columns });
    const startTime = performance.now();
    GetModelFeature(updatedModelAndTestName).then((resp) =>{
        if(resp.data==="sucess"){
          const endTime = performance.now();
          const executionTime = endTime - startTime;
          const minutes = Math.floor(executionTime / 60000);
          const seconds = Math.floor((executionTime % 60000) / 1000);

          let timeString = "";
          if (minutes > 0) {
            timeString += `${minutes} 分钟 `;
          }
          timeString += `${seconds} 秒`;
          message.success(`模型特征重要性分析完成,用时${timeString}`)
          const Juage=this.state.Juage.slice(1);
          this.setState({Juage})
          const columns = [
            {
              title: 'id',
              dataIndex: 'id',
              key: 'id',
              colSpan:0,
              render:()=>{return {props:{colSpan:0}};}
            },
            {
              title: 'url',
              dataIndex: 'url',
              key: 'url',
              colSpan:0,
              render:()=>{return {props:{colSpan:0}};}
            },
            {
              title: '模型列表',
              dataIndex: 'fileName',
              key: 'fileName',
              render: (text) => <a>{text}</a>,
            },
            {
              title: '模型大小',
              dataIndex: 'fileSize',
              key: 'fileSize',
            },
            {
              title: '下载',
              dataIndex: 'Download',
              key: 'Download',
              render:(text, record)=> {
                return (<Button type="primary" icon={<DownloadOutlined/>} onClick={()=>this.handModelDownload(record)} size={this.setState.size} className={styles.ButtonInfo}>下载模型</Button>);
              },
            },
            {
              title: '分析特征重要性',
              dataIndex: 'Show',
              key: 'Show',
              render:(text, record)=> {
                return (
                  <div>
                    <Button type="primary"  size={this.setState.size} onClick={()=>this.SelectTestFile(record)}
                            className={styles.ButtonInfo} loading={this.state.Juage.includes(record.fileName)} style={{width:"130px"}}>
                      分析模型特征
                    </Button>
                  </div>

                );
              },
            },
            {
              title: '查看特征重要性',
              key: 'examine',
              dataIndex: 'examine',
              render:(text, record)=> {
                return (
                  <Button type="primary" onClick={()=>this.BarView(record)} style={{marginLeft:'15px',width:'70px'}} className={styles.ButtonInfo}>
                    查看
                  </Button>
                );
              },
            },
            {
              title: '删除',
              key: 'Delete',
              dataIndex: 'Delete',
              render:(text, record)=> {
                return (
                  <Popconfirm
                    title="确定要删除此文件吗?"
                    onConfirm={() => this.headDeleteModel(record)}
                    icon={
                      <WarningOutlined
                        style={{
                          color: 'red',
                        }}
                      />
                    }
                  >
                    <Button type="primary" danger className={styles.ButtonInfo}>删除模型</Button>
                  </Popconfirm>);
              },
            }
          ];
          this.setState({columns})
        }
      });
  }

  SelectTestFile(record){
    const showInput=true;
    const updatedModelAndTestName = { ...this.state.ModelAndTestName, modelPath: record.url,modelId: record.id,modelName:record.fileName };
    this.loadTestData();
    this.setState({ showInput, ModelAndTestName: updatedModelAndTestName });
  }

  handModelFeature(record){
    ModelFeature(record).then((resp) => {
      if(resp.data==null){
        message.error("数据分析失败");
      }else {
        const bardata=resp.data;
        let xdata = [];
        let ydata = [];

        for (let i = 0; i < bardata.length; i++) {
          let keys = Object.keys(bardata[i]);
          let values = Object.values(bardata[i]);
          xdata.push(keys[0]);
          ydata.push(values[0]);
        }
        this.setState({xdata});
        this.setState({ydata});

        this.drawBarChart();
      }
    })
  }

  headDeleteModel(record){
    ModelDelete(record).then((resp) => {
      if(resp.data=="success"){
        message.success("删除模型成功");
        this.loadData();
      }else {
        message.error("删除模型失败");
        this.loadData();
      }


    });
  }

  drawBarChart() {
    const index = this.state.sortedKeys.indexOf(this.state.xdata.slice(0, 3)[0]);
    // const columnData = this.state.transformedData.map(row => row[index]);
    // const maxIndex = columnData.indexOf(Math.max(...columnData)); // 找到最大值的索引
    const transformedDataValues = Object.values(this.state.transformedData);
    const columnData = transformedDataValues[index];
    console.log(this.state.sortedKeys);
    console.log(index);
    console.log(columnData);
    const barChartDom = document.getElementById("barChart");
    const barOption = {
      title: {
        left: "center",
        top: 20,
        textStyle: {
          color: "#000",
          fontSize: 18,
        },
      },
      tooltip: {},
      xAxis: {
        type: "category",
        data: this.state.xdata,
        axisLabel: {
          rotate: 45, // 调整标签旋转角度
          interval: 0 // 默认显示全部标签，也可以根据实际情况调整显示间隔
        }
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "数据",
          type: "bar",
          data: this.state.ydata,
        },
      ],
    };
    const chart = echarts.init(barChartDom);
    chart.setOption(barOption);
  }

  drawStackedBarChart() {

    const ChartDom = document.getElementById('Chart');
    const chart = echarts.init(ChartDom);

    const i=0;
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: this.state.sortedKeys,
        axisLabel: {
          interval: 0 // 默认显示全部标签，也可以根据实际情况调整显示间隔
        }
      },
      series: Object.keys(this.state.transformedData).map((feature, index) => ({
        name: "class"+feature,
        type: 'bar',
        stack: '总量',
        label: {
          show: false,
          position: 'insideRight'
        },
        data: this.state.transformedData[feature]
      }))
    };
    chart.setOption(option);
  }

  closeButtonClick = () => {
    const showInput=false;
    this.setState({showInput});
  };

  ModelUploadTest(formData,fileName){
    const key = 'uploadingMessage';

    // 显示“正在上传”提示
    message.open({
      key,
      type: 'loading',
      content: '文件上传中...',
      duration: 0
    });
    TestUpload(formData).then(
      (resp) => {
        if(resp.data==="success"){
          message.open({
            key,
            type: 'success',
            content: `${fileName} 上传成功`,
            duration: 2,
          });
          this.loadTestData();
        }else {
          message.open({
            key,
            type: 'error',
            content: `${fileName} 上传失败`,
            duration: 2,
          });
        }

      }
    );
  }

  handleChangeSelect = (value) => {
    if(!this.state.modelFileVo.id){
      message.warn("请先选择模型查看");
      return;
    }

    findById(this.state.modelFileVo.id).then(resp => {
      // eslint-disable-next-line react/no-direct-mutation-state
      this.state.modelFileVo.name=resp.data.fileName;
    });
    // eslint-disable-next-line react/no-direct-mutation-state
    this.state.modelFileVo.number=value;
    this.BarView(this.state.modelFileVo);
  };

  render() {
    const { data ,columns,option,showInput,TestData,Testcolumns,initSearchParams} = this.state;
    const { currentPage,pageSize,total,modelFileVo,originalData,xdata} = this.state;
    const pagination = {
      current: currentPage,
      pageSize,
      total,
      onChange: (page) => {
        this.setState({ currentPage: page });
      },
    };
    const props = {
      name: 'file',
      multiple: true,
      onChange: (info) => {
        const { status } = info.file;
        if (status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (status === 'done') {
          const formData = new FormData();
          formData.append('file', info.file.originFileObj, info.file.name); // 将文件数据添加到 formData 对象中
          let userid;
          getLoginUserUsingGET().then(resp => {
            userid = resp.data.id;
            formData.append("userid",userid);
            this.ModelUploadTest(formData,info.file.name);
          })
        } else if (status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
      onDrop(e) {
        console.log('Dropped files', e.dataTransfer.files);
      },
    };
    return (
      <div>
        <Table columns={columns} dataSource={data} pagination={pagination}></Table>
        <Modal
          title="选择测试集进行分析"
          visible={showInput}
          onCancel={this.closeButtonClick}
          okButtonProps={{ style: { display: 'none' } }}
        >
          <Form layout="vertical" name="form_in_modal" initialValues={{ modifier: 'public' }}>
            {!TestData.length ? (
              <Form.Item>
                <Dragger {...props}>
                  <p className="ant-upload-drag-icon">
                    <InboxOutlined />
                  </p>
                  <p className="ant-upload-text">还没有上传测试文件</p>
                  <p className="ant-upload-text">点击或拖拽文件到此区域进行上传</p>
                  <p className="ant-upload-hint">支持单个或批量上传</p>
                </Dragger>
              </Form.Item>
            ) : (
              <Form.Item>
                <Table columns={Testcolumns} dataSource={TestData} />
              </Form.Item>
            )}
          </Form>
        </Modal>


          <Row gutter={20}>
            <Col span={12}>
              <Card title={modelFileVo.name+" 模型特征重要性"}>
              <Select
                defaultValue="查看更多"
                style={{
                  position:"absolute",
                  width:115,
                  right:17,
                  top:15
                }}
                onChange={this.handleChangeSelect}
                options={[
                  {
                    value: '5',
                    label: '查看前5个',
                  },
                  {
                    value: '10',
                    label: '查看前10个',
                  },
                  {
                    value: '15',
                    label: '查看前15个',
                  },
                  {
                    value: '20',
                    label: '查看前20个',
                  },
                ]}
              />
                <Alert
                  style={{
                    height:110,
                    marginTop: '-15px'
                  }}
                  description={`分析:${this.state.xdata.slice(0, 3).join(",")}对模型分类的判别影响最大,结合贡献图可以分析出,本组数据,${this.state.xdata.slice(0, 3)[0]}主要影响class${this.state.maxIndex[0]}的判别,${this.state.xdata.slice(0, 3)[1]}主要影响class${this.state.maxIndex[1]}的判别,${this.state.xdata.slice(0, 3)[2]}主要影响class${this.state.maxIndex[2]}的判别`}
                  type="info"
                />
              <div id="barChart" style={{ height: "436px", width: "100%",marginTop: '-30px'}}></div>
            </Card>
            </Col>
            <Col span={12}>
              <Card title={modelFileVo.name + " 模型特征对样本分类的贡献"}>
                <div id="Chart" style={{ height: '500px', width: "100%" }}></div>
              </Card>
            </Col>
          </Row>
      </div>
    );
  }
}
export default ExamplePage;
